<template>
	<div class="video_wrap">
		<video ref="videoPlayer" muted="muted" class="video-js video"></video>
	</div>
</template>
<script setup>
import { onUnmounted, ref, nextTick, reactive } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
const videoPlayer = ref(null);
const myPlayer = ref(null);

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
});
const state = reactive({
	src: props.modelValue,
});
const asyncData = defineEmits(['update:modelValue']);

nextTick(() => {
	setVideo();
});
let changeVideo = () => {
	console.log('#debug#🚀 ~ file: videocnp.vue:29 ~ changeVideo ~ state.src;:', state.src);
	console.log('#debug#🚀 ~ file: videocnp.vue:30 ~ changeVideo ~ props.modelValue;:', props.modelValue);
	state.src = props.modelValue;
	// myPlayer.value.sources[0].src = state.src;
	console.log('#debug#🚀 ~ file: videocnp.vue:32 ~ changeVideo ~ myPlayer.value.sources[0].src:', myPlayer);
	//setVideo();
};
defineExpose({ changeVideo });
let setVideo = () => {
	console.log('src', state.src);
	myPlayer.value = videojs(videoPlayer.value, {
		// poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
		controls: true, //视频控件
		autoplay: true, //自动播放
		sources: [
			{
				src: state.src, //视频地址
				type: 'application/x-mpegURL',
			},
		],
		controlBar: {
			remainingTimeDisplay: {
				displayNegative: false,
			},
		},
		playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
	});
};

onUnmounted(() => {
	if (myPlayer.value) {
		myPlayer.value.dispose();
	}
});
</script>
<style lang="scss" scoped>
.video_wrap {
	width: 100%;
	height: 100%;
	position: relative;

	.backIndex {
		position: absolute;
		top: 0;
		left: 0;
		height: 50px;
		width: 100%;
		line-height: 50px;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
		padding-left: 10px;
		font-size: 20px;
		font-weight: 400;
		opacity: 0;
		transition: all 0.3s;
		color: white;

		&:hover {
			opacity: 1;
		}

		span {
			cursor: pointer;
		}
	}

	.video {
		height: 100%;
		width: 100%;
	}

	::v-deep(.vjs-big-play-button) {
		margin-left: 45%;
		margin-top: 20%;
	}
}
</style>
